<template>
    <div class="login_container">
        <div class="login_box">
            <div class="box_img">
                <img class="head_img" src="../assets/logo.png" alt="头像">
            </div>
            <!-- 登录表单 -->
            <div class="form-box">
                <el-form ref="loginFormRef" :rules="loginFormRule" :model="loginForm" label-width="80px">
                    <el-form-item label="账号" prop="username">
                        <el-input v-model="loginForm.username"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input v-model="loginForm.password" type="password"></el-input>
                    </el-form-item>
                    <div class="login-btn">
                        <el-button type="primary" @click="submitForm('loginFormRef')">登录</el-button>
                        <el-button type="info" @click="resetForm('loginFormRef')">重置</el-button>
                    </div>
                    
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
  export default{
      data(){
          return{
              loginForm:{
                  username:'',
                  password:''
              },
              loginFormRule:{
                  username:[{ required: true, message: '请输入账号', trigger: 'blur' }],
                  password:[{ required: true, message: '请输入密码', trigger: 'blur' }]
              }
          }
      },
      methods:{
          submitForm(loginFormRef){
              this.$refs.loginFormRef.validate(valid=>{
                  if(!valid)return this.$message.error("请将信息填写完整");
                  //发送请求
                  this.$http.post('login',this.loginForm).then(res=>{
                      const data=res.data;
                      if(data.meta.status!==200){
                          return this.$message.error("账号或者密码错误");
                      }
                      //登录成功 将token存到sessionStorage中
                      const token=data.data.token
                      window.sessionStorage.setItem("token",token)
                      //跳转到登录页面
                      this.$router.push('/home')
                  }).catch(error=>{
                      this.$message.error('登录失败');
                  })
              })
          },
          resetForm(loginFormRef){
              this.$refs.loginFormRef.resetFields();
          }
      }
  }
</script>

<style scoped>
    .login_container{
        height: 100%;
        background:#2b4b6b;
    }
    .login_box{
        width:450px;
        height:300px;
        background:#fff;
        position:absolute;
        top:50%;
        left:50%;
        /* 移动自身的百分之五十 横向纵向 */
        transform: translate(-50%,-50%);
    }
    .box_img{
        width:150px;
        height: 150px;
        border-radius:50%;
        position:absolute;
        top: -50%;
        left: 50%;
        transform: translate(-50%,50%);
        background: #fff;
    }
    .head_img{
        width:100%;
        height: 100%;
        border-radius:50%;
        border:1px solid #fff;
    }
    .form-box{
        margin:100px auto;
        padding:10px;
    }
    .login-btn{
        position:absolute;
        right:10px;
    }
</style>